package com.hgm.study.ui.screens


import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.NavigateBefore
import androidx.compose.material.icons.filled.TextFields
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.lifecycle.viewmodel.compose.viewModel
import com.google.accompanist.insets.statusBarsPadding
import com.hgm.study.ui.components.WebView
import com.hgm.study.ui.components.rememberWebViewState
import com.hgm.study.viewmodel.ArticleViewModel
import kotlinx.coroutines.launch

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun ArticleDetailScreen(
      articleViewModel: ArticleViewModel = viewModel(),
      onBack: () -> Unit
) {

      val webViewState = rememberWebViewState(data = articleViewModel.content)
      var fonsScale by remember { mutableStateOf(1.0f) }
      val scaffoldState = rememberBottomSheetScaffoldState()
      val coroutineScope = rememberCoroutineScope()


      LaunchedEffect(Unit) {
            articleViewModel.fetchInfo()
      }

      BottomSheetScaffold(
            scaffoldState = scaffoldState,
            topBar = {
                  TopAppBar(
                        title = {
                              Text(
                                    text = "文章详情",
                                    fontSize = 18.sp,
                                    textAlign = TextAlign.Center,
                                    modifier = Modifier.fillMaxWidth()
                              )
                        },
                        navigationIcon = {
                              Icon(
                                    imageVector = Icons.Default.NavigateBefore,
                                    contentDescription = null,
                                    modifier = Modifier
                                          .clickable {
                                                onBack.invoke()
                                          }
                                          .padding(8.dp)
                              )
                        },
                        actions = {
                              Icon(
                                    imageVector = Icons.Default.TextFields,
                                    contentDescription = null,
                                    modifier = Modifier
                                          .clickable {
                                                //点击设置文字
                                                coroutineScope.launch {
                                                      if (scaffoldState.bottomSheetState.isCollapsed) {
                                                            scaffoldState.bottomSheetState.expand()
                                                      } else {
                                                            scaffoldState.bottomSheetState.collapse()
                                                      }
                                                }
                                          }
                                          .padding(8.dp)
                              )
                        }
                  )
            },
            modifier = Modifier
                  .background(MaterialTheme.colors.primary)
                  .systemBarsPadding(),
            sheetContent = {
                  Column(modifier = Modifier.padding(8.dp)) {
                        Text(text = "字体大小")

                        Slider(
                              value = fonsScale,
                              onValueChange = {
                                    fonsScale = it
                              },
                              steps = 3,
                              valueRange = 0.75f..1.75f
                        )

                        Row(
                              horizontalArrangement = Arrangement.SpaceBetween,
                              modifier = Modifier.fillMaxWidth()
                        ) {
                              Text(text = "较小", fontSize = 14.sp, color = Color(0xFF999999))//0.75
                              Text(text = "标准", fontSize = 14.sp, color = Color(0xFF999999))//1.00
                              Text(text = "普大", fontSize = 14.sp, color = Color(0xFF999999))//1.25
                              Text(text = "超大", fontSize = 14.sp, color = Color(0xFF999999))//1.50
                              Text(text = "特大", fontSize = 14.sp, color = Color(0xFF999999))//1.75
                        }
                  }
            },
            sheetPeekHeight = 0.dp
      ) {
            Box(
                  modifier = Modifier.fillMaxSize(),
                  contentAlignment = Alignment.Center
            ) {
                  WebView(webViewState)
                  if (!articleViewModel.infoLoaded) {
                        CircularProgressIndicator()
                  }
            }
      }
}

